<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <p>{{word}}</p>
        <p>{{list.join("-")}}</p>
        <p>{{word2()}}</p>
        <button @click='handler'>click</button>
    </div>
</body>
<script src="./vue//dist//vue.js"></script>
    <script>
        // 虽然三种方法都能实现相同的效果,但是对于性能方面却有差异
        // 总体来说: 每一次的数据更新就会对应模板的解析和虚拟dom的生成,vue中将常用数据进行一个缓存,计算属性会被缓存,这样就提高了性能,
        // 其他两种的话就会在数据更新的时候在模板解析的时候重新执行js,这样造成性能的损失.



        // 第一种使用计算属性是官方推荐的写法,这是因为计算属性是有响应式的,并且计算属性是有缓存的,只有当相关的属性发生变化才会重新缓存
        // 这样当当前属性为发生变化就不需要进行重新的计算,第二种直接写js代码,这样的话每次都会执行js比较费时间,没有缓存的功能.
        //第三种和第二种本质一样,每次页面渲染会执行一次对于的js代码,这样显然消耗性能,并且没有利用缓存.
        let vue = new Vue({
            el:'#root',
           data() {
               return {
                    list:['feifei','is','dashuaiguo'],
               }
           },
            methods: {
                word2(){
                    return this.list.join("-")
                },
                handler() {
                    this.list.push('!')
                }
            },
            computed: {
                word() {
                    return this.list.join("-")
                }
            },
        })
    </script>
</html>